<template>
  <div>
    <!-- <swiper loop auto
    :list="urlList"
    :index="bannerIndex"
    @on-index-change="bannerIndexChange"
    v-if="showTimeOut"
    >
    </swiper> -->
    <!-- <div style="height:44px;">
      <sticky scroll-box="vux_view_box_body" ref="sticky" :check-sticky-support="false">
        <x-header :left-options="{showBack: false}" title="润皓备考系统"></x-header>
      </sticky>
    </div> -->
    <the-banner-swiper v-if="showTimeOut" />
    <group title="快捷操作（不限次月卡有效期30天练习次数不限）">
      <grid cols="4">
        <grid-item :label="this.onceCardInfo.cardName" :link="{name:'CardPayment',params: { cardId: 10011001}}">
          <img slot="icon" class="" src="../../static/images/once_green.png">
        </grid-item>
        <grid-item :label="this.monthCardInfo.cardName" :link="{name:'CardPayment',params: { cardId: 10011002}}">
          <img slot="icon" class="" src="../../static/images/month_green.png">
        </grid-item>
        <grid-item label="模拟练习" :link="{name:'SelectUserCard'}">
          <img slot="icon" class="" src="../../static/images/question_green.png">
        </grid-item>
        
        <grid-item :link="{name:'ReviewExercises'}">
          <span slot="label">练习记录</span>
          <img slot="icon" class="" src="../../static/images/history_green.png">
        </grid-item> 
        <!-- <grid-item label="帮助" @on-item-click="onItemClick">
          <img slot="icon" class="" src="../../static/images/help_green.png">
        </grid-item> -->
      </grid>
    </group>
    <group title="非煤矿类特种作业人员初训练习题（国家总局）">
      <grid :cols="3">
        <grid-item v-for="(item, index) in workTypeVK" :key="index">
          <span slot="label" v-bind:class="[CardIsAvaliable(item.key)? 'green':'']">{{item.value}}</span>
          <img 
          v-bind:class="[CardIsAvaliable(item.key)?'':'gray']" 
          slot="icon" 
          src="../../static/images/cert_green.png" 
          @click="routePush(item.key)">
        </grid-item>
        <!-- <grid-item label="敬请期待">
          <img slot="icon" class="" src="../../static/images/more_green.png">
        </grid-item> -->
        <!-- <grid-item label="帮助" @on-item-click="onItemClick">
          <img slot="icon" class="" src="../../static/images/help_green.png">
        </grid-item> -->
      </grid>
    </group>
    
  </div>
</template>

<script>
import TheBannerSwiper from './commons/TheBannerSwiper'

import { Swiper, Blur, Sticky, Grid, GridItem, Group, Cell, XButton, XHeader, Badge } from 'vux'
import { mapGetters, mapActions } from 'vuex'

// const TheBannerSwiper = () => import('./commons/TheBannerSwiper')

export default {
  components: {
    Swiper,
    Blur,
    Sticky,
    Grid,
    GridItem,
    Group,
    Cell,
    XButton,
    XHeader,
    TheBannerSwiper,
    Badge
  },
  data () {
    return {

      // bannerIndex: 0,
      showTimeOut: false,
      showExerciseFrame: false,
      msg: 'Hello World!'
    }
  },
  mounted () {
    this.showExerciseFrame = false
  },
  computed: {
    // 映射getters方法，做为计算属性
    // hasWork：用户是否拥有此工种编号所对应的做题卡
    ...mapGetters(['hasWork', 'workTypeVK', 'onceCardInfo', 'monthCardInfo']),

    // 轮播图
    urlList: function () {
      return this.baseList.map((item, index) => ({
        url: item.url,
        img: item.img,
        fallbackImg: item.fallbackImg,
        title: `(点击查看)${item.title}`
      }))
    }
  },
  methods: {
    // 映射action的方法，作为method
    // homeInit：初始化Home页面所需的数据
    ...mapActions(['homeInit', 'getUserInfo', 'getWorkType', 'getUserAllCardInfo']),

    CardIsAvaliable: function (workType) {
      var hasWork = this.hasWork(workType)
      var hasUnfinish = localStorage.hasOwnProperty(workType + '-lastMins') && localStorage.hasOwnProperty(workType)
      if (hasWork || hasUnfinish) {
        return true
      } else {
        return false
      }
    },

    bannerIndexChange: function (index) {
      this.bannerIndex = index
    },

    // 路由到指定页面，并传递工种ID到目标页面
    routePush: function (workTypeId) {
      if (this.hasWork(workTypeId)) {
        // workid === workType  就是工种代码
        this.$router.push({name: 'GetExercises', params: { workid: workTypeId }})
      } else {
        // 如果无卡，则检查是否有未做完题目
        if (localStorage.hasOwnProperty(workTypeId + '-lastMins') && localStorage.hasOwnProperty(workTypeId)) {
          this.$router.push({name: 'FinishExercise', params: { workid: workTypeId }})
        } else {
          this.$router.push({name: 'CardPayment', params: { workid: workTypeId }})
        }
      }
    },
    onItemClick: function () {
      // var that = this
      this.$vux.confirm.show({
        title: '查看帮助',
        content: '查看帮助将离开本系统，查看完帮助后不能通过后退回到本系统，需要您关闭窗口重新进入本系统，您是否继续查看帮助？',
        onConfirm () {
          window.location = 'http://dwz.cn/78fWU2'
          // that.$router.replace({path: 'http://dwz.cn/78fWU2'})
        }
      })
    }
  },
  created () {
    // this.$nextTick(() => {
    //   this.homeInit()
    // })
    setTimeout(() => {
      this.showTimeOut = true
    }, 100)
    this.homeInit()
  }
}
</script>

<style scoped>
.m5{
  margin-left: 5px;
  margin-right: 5px;
}
.green{
  color: #04be02;
}
.gray{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

</style>
